<template>
  <div class="main">
    <div v-if="this.btnList.length > 0" class="main_box">
      <div class="header">
        <el-button
          class="header_btn"
          :class="{ workActive: changeLeftBackground == index }"
          v-for="(item, index) in btnList"
          :key="index"
          @click="workBtnFun(index)"
          >{{ item.name }}
        </el-button>
      </div>
      <!-- 渠道客服看板 -->
      <workBtn v-if="cardName == 'workBtn'"></workBtn>
    </div>
    <!-- <div v-else></div> -->
  </div>
</template>
<script>
import { apiWorkBtn, getCommissioner } from "../../../src/assets/js/api";
import workBtn from "../workBtn/channel";
export default {
  name: "workbench",
  components: { workBtn },
  data() {
    return {
      btnList: [],
      cardName: "",
      changeLeftBackground: 0,
    };
  },
  created() {
    this.getList();
  },

  methods: {
    //获取按钮！
    getList() {
      apiWorkBtn().then((res) => {
        if (res.code == 200) {
          this.btnList = res.data;
          if (this.btnList.length > 0) {
            this.cardName = this.btnList[0].url.substring(
              this.btnList[0].url.lastIndexOf("/") + 1
            );
          }
        }
      });
      getCommissioner().then((res) => {
        if (res.code == 200) {
          sessionStorage.setItem("reviewer", res.data.reviewer);
        }
      });
    },
    // 点击工作台按钮
    workBtnFun(index) {
      this.changeLeftBackground = index;
      var cardName = this.btnList[index].url.substring(
        this.btnList[index].url.lastIndexOf("/") + 1
      );
      this.cardName = cardName;
    },
  },
};
</script>
<style lang="less" scoped>
.main_box
{
    width: 100%;  height: calc(100vh - 100px);  padding-bottom: 20px;
}
.header
{
    width: calc(100% - 40px);  height: 32px;  margin: 20px;  text-align: left;
}
.header_btn
{
    line-height: 0;  height: 32px;
}
.workActive
{
    color: #3b9df8;  border-color: #3b9df8;  background-color: rgba(59, 157, 248, .2);
}



</style>
